<template>
  <a-modal
    v-model="showModal"
    width="1100px"
    :dialog-style="{ top: '30px' }"
    :body-style="{
      padding: '8px 20px',
    }"
  >
    <section class="flex font-bold text-18" slot="title">
      <section class="flex items-center">
        <span>订单详情</span>
        <span class="mx-6 text-28">·</span>
        <span>{{ currData.id }}</span>
        <span class="mx-6 text-28">·</span>
      </section>
      <section class="status" :style="{ color: colorMap[currData.status] }">
        {{ $utils.getEnumName(orderStatusEnums, currData.status) }}
      </section>
    </section>
    <a-spin :spinning="loading">
      <a-tabs :animated="false" v-model="tabKey" @change="getOrderData">
        <a-tab-pane key="bookingInfo" tab="预定信息">
          <section class="info">
            <section class="basic-info mt-10">
              <section class="user-info">
                <section class="username">{{ bookingInfo.travellerName }}</section>
                <section class="mb-12" :class="bookingInfo.isNewCustomer ? 'is-new' : ''">
                  （门店{{ bookingInfo.isNewCustomer ? '新' : '老' }}客）
                </section>
                <section class="phone">
                  <img src="@/assets/icons/phone.png" alt="" />
                  {{ bookingInfo.phone }}
                </section>
              </section>
              <section class="car-info">
                <section class="mb-4">预定车型：{{ bookingInfo.vehicleDesc }}</section>
                <section>
                  用车时间：{{ bookingInfo.reservingPickupTime | formatTime }}至{{
                    bookingInfo.reservingReturnTime | formatTime
                  }}
                  （{{ bookingInfo.realRentHours | formatHours }}）
                </section>
                <section class="mb-4">押金支付方式：{{ bookingInfo.creditSupport ? '信用免押' : '到店支付' }}</section>
                <section class="mb-4">
                  租车押金：<span class="font-bold">{{ bookingInfo.vehicleDeposit }}</span>
                </section>
                <section>
                  违章押金：<span class="font-bold">{{ bookingInfo.legalDeposit }}</span>
                </section>
              </section>
            </section>
            <a-divider style="margin: 40px 0" />
            <a-row type="flex" :gutter="16">
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">订单编号：</section>
                  <section class="value">{{ bookingInfo.id }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">订单状态：</section>
                  <section :style="{ color: colorMap[currData.status] }" class="value">
                    {{ $utils.getEnumName(orderStatusEnums, bookingInfo.status) }}
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">预定渠道：</section>
                  <section class="value">{{ bookingInfo.channelName || '平台下单' }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">渠道订单号：</section>
                  <section class="value">{{ bookingInfo.channelOrderNo || bookingInfo.id }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">采购价(元)：</section>
                  <section class="value">
                    <span class="font-bold">￥{{ bookingInfo.totalActualFee }}</span>
                    <!-- <a-tooltip title="引流金额即渠道下单时确认的金额，不会随业务变化而变化">
                      <a-icon class="ml-4" type="question-circle" />
                    </a-tooltip> -->
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">支付价(元)：</section>
                  <section class="value">
                    <span class="font-bold">￥{{ bookingInfo.totalRealActualFee }}</span>
                    <!-- <a-tooltip
                      title="实际金额即真实的订单金额，一开始是引流金额，会因为更改订单预订信息而发生变化，用以记录实际金额"
                    >
                      <a-icon class="ml-4" type="question-circle" />
                    </a-tooltip> -->
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">退款金额(元)：</section>
                  <section class="value">
                    <span class="font-bold">￥{{ bookingInfo.totalRefundFee }}</span>
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label" style="width: 121px">订单取消费用(元)：</section>
                  <section class="value">
                    <span class="font-bold"
                      >￥{{ bookingInfo.cancelOrderType === 3 ? 0 : bookingInfo.cancelCharge }}</span
                    >
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label" style="width: 121px">供应商取消费用(元)：</section>
                  <section class="value">
                    <span class="font-bold"
                      >￥{{ bookingInfo.cancelOrderType === 3 ? bookingInfo.cancelCharge : 0 }}</span
                    >
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">承租人：</section>
                  <section class="value">{{ bookingInfo.travellerName }}</section>
                </section>
              </a-col>
              <a-col :span="16">
                <section class="form-item">
                  <section class="label">门店联系电话：</section>
                  <section class="value">{{ bookingInfo.storePhone }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">取车门店：</section>
                  <section class="value">{{ bookingInfo.pickupStoreName }}</section>
                </section>
              </a-col>
              <a-col :span="16">
                <section class="form-item">
                  <section class="label">取车地址：</section>
                  <section class="value flex">
                    {{ bookingInfo.pickupAddress
                    }}<img
                      @click="setMapPoint(bookingInfo)"
                      src="@/assets/icons/pin2.png"
                      alt=""
                      class="cursor-pointer mx-9"
                    /><span class="tag orange-bg">
                      <template v-if="bookingInfo.pickupArrivalType === 1">上门取车</template>
                        <template v-else-if="bookingInfo.pickupArrivalType === 2">门店取车</template>
                        <template v-else-if="bookingInfo.pickupArrivalType === 3">店员接送</template>
                  </span>
                  </section>
                </section>
              </a-col>
              <a-col :span="16">
                <section class="form-item">
                  <section class="label">取车门店地址：</section>
                  <section class="value flex">
                    {{ bookingInfo.pickupStoreAddress
                    }}<img
                      @click="setMapPoint(bookingInfo, 'pickupStore')"
                      src="@/assets/icons/pin2.png"
                      alt=""
                      class="cursor-pointer mx-9"
                    />
                  </section>
                </section>
              </a-col>
							<a-col :span="8">
							  <section class="form-item">
							    <section class="label">取车地址直线距离门店（km）:{{bookingInfo.pickupDistance/1000}}</section>
							   
							  </section>
							</a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">还车门店：</section>
                  <section class="value">{{ currData.returnStoreName }}</section>
                </section>
              </a-col>
              <a-col :span="16">
                <section class="form-item">
                  <section class="label">还车地址：</section>
                  <section class="value flex">
                    {{ bookingInfo.returnAddress
                    }}<img
                      @click="setMapPoint(bookingInfo, 'return')"
                      src="@/assets/icons/pin2.png"
                      alt=""
                      class="cursor-pointer mx-9"
                    /><span class="tag orange-bg">
                      <template v-if="bookingInfo.returnArrivalType === 1">上门还车</template>
                        <template v-else-if="bookingInfo.returnArrivalType === 2">门店还车</template>
                        <template v-else-if="bookingInfo.returnArrivalType === 3">店员接送</template>
                  </span>
                  </section>
                </section>
              </a-col>
              <a-col :span="16">
                <section class="form-item">
                  <section class="label">还车门店地址：</section>
                  <section class="value flex">
                    {{ bookingInfo.returnStoreAddress
                    }}<img
                      @click="setMapPoint(bookingInfo, 'returnStore')"
                      src="@/assets/icons/pin2.png"
                      alt=""
                      class="cursor-pointer mx-9"
                    />
                  </section>
                </section>
              </a-col>
			  <a-col :span="8">
			    <section class="form-item">
			      <section class="label">还车地址直线距离门店（km）:{{bookingInfo.returnDistance/1000}}</section>
			     
			    </section>
			  </a-col>
              <a-col :span="8" v-if="$utils.judgeTime(bookingInfo.cancelTime)">
                <section class="form-item">
                  <section class="label">取消时间：</section>
                  <section class="value">{{ bookingInfo.cancelTime }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">证件类型：</section>
                  <section class="value">
                    {{ $utils.getEnumName(credentialTypeEnums, bookingInfo.credentialType) }}
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">证件号码：</section>
                  <section class="value">{{ bookingInfo.credentialNo }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">联系电话：</section>
                  <section class="value">
                    <a :href="'tel:' + bookingInfo.phone"
                      ><a-icon style="transform: rotateY(180deg)" type="phone" />{{ bookingInfo.phone }}</a
                    >
                  </section>
                </section>
              </a-col>
            </a-row>
            <section class="form-item block" style="margin-top: 4px; margin-bottom: 28px">
              <section class="mb-20 label font-bold w-auto">订单备注：</section>
              <section class="value">
                <a-textarea
                  v-model="orderRemark"
                  :max-length="300"
                  :rows="3"
                  placeholder="请输入订单备注，自动保存"
                  @blur="confirmRemark"
                />
              </section>
            </section>
          </section>
        </a-tab-pane>
        <a-tab-pane key="feeInfo" tab="费用信息">
          <section class="info">
            <section class="form-item block">
              <section class="mb-20 label font-bold w-auto">预定费用：</section>
              <a-table :columns="feeColumns" :data-source="feeInfoArr || []" :pagination="false" bordered>
                <template #unitPrice="unitPrice, data">
                  ￥{{ unitPrice }} <span v-if="data.code === 'childseat'">| 1个</span>

                  <a-popconfirm placement="topLeft" overlayClassName="unitPricePopconfirm" v-if="data.name=='租车费'">
                    <template slot="title">
                        <div class="flex pirceBox flex-wrap">
                            <div class="mr-6 mb-5" v-for="item in feeInfo.priceCalendar" :key="item.date">
                              <div class="pirceBox-item">
                                  <p>{{moment(item.date).format('M月DD日')}}</p>
                                  <p>{{getWeek(item.date)}}</p>
                                  </div>
                              <div class="text-center mt-4" style="color: #1890ff;">￥{{item.price}}</div>
                            </div>
                        </div>

                  </template>
                 
            </a-popconfirm>



                </template>

                <template #amount="amount, data">
                    <span style="position: relative;">
                      <span>{{data.amount}}元</span>
                      <a-popconfirm placement="topLeft" overlayClassName="unitPricePopconfirm" v-if="data.name=='租车费'">
                      <template slot="title">
                        <div class="flex pirceBox flex-wrap">
                            <div class="mr-6 mb-5" v-for="item in feeInfo.priceCalendar" :key="item.date">
                              <div class="pirceBox-item">
                                  <p>{{moment(item.date).format('M月DD日')}}</p>
                                  <p>{{getWeek(item.date)}}</p>
                                  </div>
                              <div class="text-center mt-4" style="color: #1890ff;">￥{{item.price}}</div>
                            </div>
                        </div>

                       </template>
                       <a-button  type="link"  class="btnRigth">明细</a-button>
                   </a-popconfirm>
                    
                    </span>
                 
                </template>

                <template slot="footer" slot-scope="currentPageData">
                  <section class="footer-item flex items-center justify-between">
                    <section>下单优惠</section>
                    <section>￥{{ feeInfo.totalPromotion }}</section>
                  </section>
                  <section class="footer-item flex items-center justify-between">
                    <section>合计(元)</section>
                    <section>￥{{ feeInfo.totalActualFee-feeInfo.totalPromotion }}</section>
                  </section>
                </template>
              </a-table>

      
              <div v-for="(item,index) in feeInfo.renewalOrderList" :key="index">
                <section class="mt-30 mb-20 label font-bold w-auto">第{{transformNumber(index)}}次续租费用：</section>
                <a-table bordered
                :columns="reletFeeColumns"
                :data-source="item.feeItems"
                :pagination="false"
              >
              <template #unitPrice="unitPrice, data">
                  ￥{{ unitPrice }} 
             
                </template>

                <template #amount="amount, data">
                    <span style="position: relative;">
                      <span>{{data.amount}}元</span>
                    <a-popconfirm placement="topLeft" overlayClassName="unitPricePopconfirm" v-if="data.name=='租车费'">
                    <template slot="title">
                        <div class="flex pirceBox flex-wrap	">
                            <div class="mr-6 mb-5" v-for="popconfirm in item.priceCalendarList" :key="popconfirm.date">
                              <div class="pirceBox-item">
                                  <p>{{moment(popconfirm.date).format('M月DD日')}}</p>
                                  <p>{{getWeek(popconfirm.date)}}</p>
                                  </div>
                              <div class="text-center mt-4" style="color: #1890ff;">￥{{popconfirm.price}}</div>
                            </div>
                        </div>

                  </template>
                  <a-button  type="link" class="btnRigth" >明细</a-button>
            </a-popconfirm>
          </span>
                </template>
				
                <template #rentDays="rentDays, data">
                  {{ $utils.formatHours(item.realRentHours)}}
                </template>
					<template slot="footer" slot-scope="currentPageData">
						<section class="footer-item flex items-center justify-between">
							<section>续租优惠(减免车费)</section>
							<section>￥{{ item.totalPromotion }}</section>
						</section>
						<section class="footer-item flex items-center justify-between">
							<section>合计(元)</section>
							<section>￥{{ item.actualFee}}</section>
						</section>
					</template>			
            </a-table>
              </div>



              <section class="mt-30 mb-20 label font-bold w-auto">增值服务：</section>
              <a-table
                :columns="addedServiceColumns"
                :data-source="feeInfo.addedServicesInfos || []"
                :pagination="false"
              >
                <section class="flex items-center" slot="serviceName" slot-scope="serviceName, data">
                  <a-tag class="mr-4" color="#1890ff" v-if="data.isOneWayFee">一口价</a-tag>
                  <a-tooltip :title="serviceName">
                    <section class="overflow">{{ serviceName }}</section>
                  </a-tooltip>
                </section>
                <template #serviceDesc="serviceDesc">
                  <a-tooltip :title="serviceDesc">
                    <section class="overflow">{{ serviceDesc }}</section>
                  </a-tooltip>
                </template>
              </a-table>
			  <section  class="mt-30 mb-20 label font-bold w-auto" >线下收款：</section>
			  <a-table
			    :columns="osfflineColumns"
			    :data-source="offlineCharges"
			    :pagination="false"
			  >
			  <template #photos="val, data">
			       <img v-if="data.photos"
			         @click="
			           isPreviewVisible = true
			           previewImage = data.photos
			         "
			         :src=data.photos
			         alt=""
			         class="w-80 h-80 br5 object-cover mx-5 ss-img cursor-pointer"
			       />
				   <div v-if="!data.photos" class="ml-20">-</div>
			  </template>
			  <!--  <template #deletes="val, data">
			     <a
			       href="javascript:void(0);"
			       class="block"
			       @click="deletex(data)"
			     >删除</a>
			    </template> -->
			  </a-table>
			  <section  class="mt-30 mb-20 label font-bold w-auto" >优惠信息：</section>
			  <a-table
			    :columns="preferential"
			    :data-source="feeInfo.promotionsInfo||[]"
			    :pagination="false"
			  >
			   <template #investor="val, data">
			       <div v-if="data.investor==1">平台</div>
			     <div v-if="data.investor==2">供应商</div>
			     <div v-if="data.investor==3">渠道</div>
			   </template>
			  </a-table>
			  <a-modal :visible="isvisible" :closable="false" :confirm-loading="confirmLoading" @ok="handleOk"
			  	@cancel="handleCancel">
			  	<p class="mt-15" style="color: red;font-size: 16px;text-align: center;font-weight: bold;">{{ ModalText }}</p>
			  </a-modal
              <section class="form-item block" style="margin-top: 4px; margin-bottom: 28px">
                <section class="mb-20 label font-bold w-auto">订单备注：</section>
                <section class="value">
                  <a-textarea
                    v-model="orderRemark"
                    :max-length="300"
                    :rows="3"
                    placeholder="请输入订单备注，自动保存"
                    @blur="confirmRemark"
                  />
                </section>
              </section>
            </section>
          </section>
        </a-tab-pane>
        <a-tab-pane v-if="currData.status >= 3" key="pickupInfo" tab="取车信息">
          <section class="info return-info">
            <a-row type="flex" :gutter="16">
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">车牌号码：</section>
                  <section class="value">{{ bookingInfo.vehicleLicenceNum }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">取车时间：</section>
                  <section class="value">{{ pickupInfo.realityPickupTime }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">取车里程(km)：</section>
                  <section class="value">{{ pickupInfo.pickupCurrentMileage }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">取车油量：</section>
                  <section class="value">{{ pickupInfo.pickupCurrentFuel }}/{{ 16 }}</section>
                </section>
              </a-col>
							<a-col :span="8">
							  <section class="form-item">
							    <section class="label">联系电话：</section>
							    <section class="value">{{ pickupInfo.phone}}</section>
							  </section>
							</a-col>
            <!--  <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下不计免赔(元)：</section>
                  <section class="value font-bold">{{ pickupInfo.notCompensateAmount }}元</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下异地取车(元)：</section>
                  <section class="value font-bold">{{ pickupInfo.otherPlacePickupAmount }}元</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下夜间服务费(元)：</section>
                  <section class="value font-bold">{{ pickupInfo.nightServiceFee }}元</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下儿童座椅(元)：</section>
                  <section class="value font-bold">{{ pickupInfo.childSeatAmount }}元</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下其他收款：</section>
                  <section class="value font-bold">{{ pickupInfo.otherFee }}元</section>
                </section>
              </a-col> -->
							<a-col :span="12">
							  <section class="form-item block">
							    <section class="mb-20 label w-auto">验车照片：</section>
							    <section class="value">
							      <PreviewImage
							        v-if="pickupInfo.vehicleAppearancePhotos"
							        :value="pickupInfo.vehicleAppearancePhotos.split(',').filter((e) => e)"
							      />
							    </section>
							  </section>
							</a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">里程油表：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.currentFuelPhotos"
                      :value="pickupInfo.currentFuelPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">驾照主副页：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.drivingLicensePhotos"
                      :value="pickupInfo.drivingLicensePhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">身份证正反面：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.identityCardPhotos"
                      :value="pickupInfo.identityCardPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
            <!--  <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">租车合同：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.pickupContractPhotos"
                      :value="pickupInfo.pickupContractPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">车伤照片：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.carDamagePhotos"
                      :value="pickupInfo.carDamagePhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col> -->
             <!-- <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">收款凭证：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.receiptVoucherPhotos"
                      :value="pickupInfo.receiptVoucherPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col> -->
           
            <!--  <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">前后挡风玻璃：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.glassPhotos"
                      :value="pickupInfo.glassPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">后备箱、备胎及随车工具：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.trunkPhotos"
                      :value="pickupInfo.trunkPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label w-auto">前后排座椅：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="pickupInfo.seatPhotos"
                      :value="pickupInfo.seatPhotos.split(',').filter((e) => e)"
                    />
                
                  </section>
                </section>
              </a-col> -->
            </a-row>
            <section class="form-item block" style="margin-top: 4px; margin-bottom: 28px">
              <section class="mb-20 label font-bold w-auto">订单备注：</section>
              <section class="value">
                <a-textarea
                  v-model="orderRemark"
                  :max-length="300"
                  :rows="3"
                  placeholder="请输入订单备注，自动保存"
                  @blur="confirmRemark"
                />
              </section>
            </section>
          </section>
        </a-tab-pane>
        <a-tab-pane v-if="currData.status >= 4" key="returnInfo" tab="还车信息">
          <section class="info return-info">
            <a-row type="flex" :gutter="16">
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">还车时间：</section>
                  <section class="value">{{ returnInfo.realityReturnTime }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">还车里程(km)：</section>
                  <section class="value">{{ returnInfo.returnCurrentMileage }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">还车油量：</section>
                  <section class="value">{{ returnInfo.returnCurrentFuel }}/16</section>
                </section>
              </a-col>
							<a-col :span="8">
							  <section class="form-item">
							    <section class="label">是否好评：</section>
							    <section class="value">{{ returnInfo.isGoodWords?"是":"否" }}</section>
							  </section>
							</a-col> 
							<a-col :span="8">
							   <section class="form-item">
							     <section class="label">是否车损：</section>
							     <section class="value">{{ returnInfo.isVehicleDamage?"是":"否" }}</section>
							   </section>
							 </a-col>
             <!-- <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下超时费(元)：</section>
                  <section class="value">{{ returnInfo.returnCurrentFuel }}</section>
                </section>
              </a-col>

              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下车损(元)：</section>
                  <section class="value">{{ returnInfo.vehicleDamageFee }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下补油费(元)：</section>
                  <section class="value">{{ returnInfo.backFuelFee }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下违章收款(元)：</section>
                  <section class="value">{{ returnInfo.peccancyFee }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下异地还车(元)：</section>
                  <section class="value">{{ returnInfo.otherPlaceReturnAmount }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下夜间服务费(元)：</section>
                  <section class="value">{{ returnInfo.nightServiceFee }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">线下其他收款(元)：</section>
                  <section class="value">{{ returnInfo.otherFee }}</section>
                </section>
              </a-col> -->
             <!-- <a-col :span="8">
                <section class="form-item">
                  <section class="label">是否车损：</section>
                  <section class="value">{{ returnInfo.isVehicleDamage?"是":"否" }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">是否需要维修：</section>
                  <section class="value">{{ returnInfo.isNeedMaintain?"是":"否" }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">是否好评：</section>
                  <section class="value">{{ returnInfo.isGoodWords?"是":"否" }}</section>
                </section>
              </a-col> -->
             <!-- <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">收款凭证：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.receiptVoucherPhotos"
                      :value="returnInfo.receiptVoucherPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col> -->
            <!--  <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">好评照片：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.goodWordPhotos"
                      :value="returnInfo.goodWordPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col> -->
           
  <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">验车照片：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.vehicleAppearancePhotos"
                      :value="returnInfo.vehicleAppearancePhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">里程油表：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.currentFuelPhotos"
                      :value="returnInfo.currentFuelPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
			  <a-col :span="12">
			      <section class="form-item block">
			        <section class="mb-20 label">好评照片：</section>
			        <section class="value">
			          <PreviewImage
			            v-if="returnInfo.goodWordPhotos"
			            :value="returnInfo.goodWordPhotos.split(',').filter((e) => e)"
			          />
			        </section>
			      </section>
			    </a-col>
             <!-- <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">车伤照片：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.carDamagePhotos"
                      :value="returnInfo.carDamagePhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">车身外观照：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.vehicleAppearancePhotos"
                      :value="returnInfo.vehicleAppearancePhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">前后挡风玻璃：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.glassPhotos"
                      :value="returnInfo.glassPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">后备箱、备胎及随车工具：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.trunkPhotos"
                      :value="returnInfo.trunkPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item block">
                  <section class="mb-20 label">前后排座椅：</section>
                  <section class="value">
                    <PreviewImage
                      v-if="returnInfo.seatPhotos"
                      :value="returnInfo.seatPhotos.split(',').filter((e) => e)"
                    />
                  </section>
                </section>
              </a-col> -->
            </a-row>
            <section class="form-item block" style="margin-top: 4px; margin-bottom: 28px">
              <section class="mb-20 label font-bold w-auto">订单备注：</section>
              <section class="value">
                <a-textarea
                  v-model="orderRemark"
                  :max-length="300"
                  :rows="3"
                  placeholder="请输入订单备注，自动保存"
                  @blur="confirmRemark"
                />
              </section>
            </section>
          </section>
        </a-tab-pane>

        <a-tab-pane key="deductInfo" tab="扣款信息">
         <!-- <div
            v-show="deductData.length !== 0"
            class="p-10 mt-20 deductInfoDiv"
            style="border: 1px solid #ccc"
            v-for="(item, index) in deductData"
            :key="index"
          > -->
           <a-table class="mt-16 order-table" :columns="columns" :data-source="deductData" bordered :pagination="false">
           	
           	<template #totalDeductAmount="totalDeductAmount, data">
           		<div>
           			<span>{{data.totalDeductAmount}}</span>
           			<span style="color: #1890ff;" @click="getdeductionDetails(data)" class="ml-7">明细</span>
           		</div>
           	</template>
              
           </a-table>
        </a-tab-pane>
        <a-tab-pane key="refundInfo" tab="退款信息">
          <a-table
            class="mt-16"
            :columns="refundColumns"
            :data-source="refunddata"
            :scroll="scroll"
            :pagination="false"
          >
            <template #createByName="createByName, data">
              <section class="text-gray text-12">{{ data.createByName ? data.createByName : '-' }}</section>
            </template>
          </a-table>
        </a-tab-pane>

        <a-tab-pane key="strategyInfo" tab="政策须知">
          <section class="strategy-info info">
          <!--  <a-row type="flex" :gutter="16" v-if="strategyInfo.pickCarmaterialsInfo">
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-16 label font-bold w-auto">取车材料：</section>
                </section>
              </a-col>
              <a-col :span="16">
                <section class="form-item">
                  <section class="label">取车证件类型：</section>
                  <section class="value">{{ credentialTypeNames }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">证件有效期(月)：</section>
                  <section class="value">{{ strategyInfo.pickCarmaterialsInfo.credentialValidityMonth }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">驾驶证有效期(月)：</section>
                  <section class="value">{{ strategyInfo.pickCarmaterialsInfo.driveValidityMonth }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">驾龄：</section>
                  <section class="value">
                    >={{ strategyInfo.pickCarmaterialsInfo.minDriveAgeRequirementsMonth }}个月
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">信用卡有效期(月)：</section>
                  <section class="value">{{ strategyInfo.pickCarmaterialsInfo.creditCardValidityMonth }}</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item">
                  <section class="label">支付方式：</section>
                  <section class="value">{{ depositPayTypeNames }}</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-16 label font-bold w-auto">取消收费类型：</section>
                  <section class="value">
                    {{ $utils.getEnumName(cancelTypeEnums, strategyInfo.cancelStrategInfo.cancelType) }}
                  </section>
                </section>
              </a-col>
            </a-row> -->
            <section class="form-item block">
              <section class="mb-20 label font-bold w-auto">取消规则：</section>
              <a-table :columns="cancelRulesColumns" :data-source="cancelData" :pagination="false">
                <template #Hours="Hours, data, index">
                  <section v-if="index == 0">
                    {{ moment(bookingInfo.reservingPickupTime).subtract(Hours, 'hours').format('YYYY-MM-DD HH:mm') }}
                    前取消
                  </section>

                  <section v-else-if="index === cancelData.length - 1">
                    {{ moment(bookingInfo.reservingPickupTime).format('YYYY-MM-DD HH:mm') }} 后取消
                  </section>

                  <section v-else>
                    {{
                      moment(bookingInfo.reservingPickupTime)
                        .subtract(cancelData[index - 1].Hours, 'hours')
                        .format('YYYY-MM-DD HH:mm')
                    }}
                    到
                    {{
                      moment(bookingInfo.reservingPickupTime)
                        .subtract(cancelData[index].Hours, 'hours')
                        .format('YYYY-MM-DD HH:mm')
                    }}
                    之间取消
                  </section>
                </template>

                <template #Fee="Fee">
                  <section v-if="Fee <= 0" :style="{ color: Fee <= 0 ? '#52C41A' : undefined }">免费取消</section>
                  <section v-else>
                    {{ strategyInfo.cancelStrategInfo.cancelType === 1 ? `订单费用${Fee}%` : Fee + '元' }}
                  </section>
                </template>
              </a-table>
              <section class="mt-30 mb-20 label font-bold w-auto">租车须知：</section>
              <a-table :columns="rentColumns" :data-source="strategyInfo.orderPolicy || []" :pagination="false">
               <!-- <template #noticeType="noticeType">
                  {{ $utils.getEnumName(noticeTypeEnums, noticeType) }}
                </template> -->
                <template #content="content">
                  <a-tooltip :title="content">
                    <section class="overflow">{{ content }}</section>
                  </a-tooltip>
                </template>
								<template #description="description">
									<div v-for="(item,index) in description">
										{{item}}
									</div>
									
								</template>
              </a-table>
          <!--    <section class="mt-30 mb-20 label font-bold w-auto">更多须知：</section>
              <a-table
                :columns="moreTipsColumns"
                :data-source="strategyInfo.rentCarTipsInfos || []"
                :pagination="false"
              >
                <template #dataTitle="title, record">
                  <section class="mb-8">{{ title }}</section>
                  <section style="color: #999">{{ record.content }}</section>
                </template>
                <template #rentCarTips="rentCarTips">
                  <section class="text-left" v-for="(item, index) in JSON.parse(rentCarTips)" :key="index">
                    <section class="flex items-center">{{ item.Title }}</section>
                    <section class="my-8" style="color: #999">{{ item.Content }}</section>
                  </section>
                </template>
              </a-table> -->
            </section>
            <section class="form-item block" style="margin-top: 4px; margin-bottom: 28px">
              <section class="mb-20 label font-bold w-auto">订单备注：</section>
              <section class="value">
                <a-textarea
                  v-model="orderRemark"
                  :max-length="300"
                  :rows="3"
                  placeholder="请输入订单备注，自动保存"
                  @blur="confirmRemark"
                />
              </section>
            </section>
          </section>
        </a-tab-pane>

   <!-- 续租信息 -->
   <a-tab-pane key="renewalInfo" tab="续租信息">
          <a-table
            class="mt-16"
            :columns="renewalInfoColumns"
            :data-source="renewalInfoData"
            :scroll="scroll"
            :pagination="false"
          >
            <template #id=" id,data">
              <p class="text-left">平台:{{data.id||'-'}}</p>
              <p class="text-left">渠道:{{data.channelOrderNo||'-'}}</p>
            </template>

            <template #rentDays=" rentDays,data">
                <div>{{data.pickupTime}}</div>
                <div>至</div>
                <div>{{data.returnTime}}</div>
                <div>租期:{{data.rentDays}}天</div>
            </template>
            <template #fee=" fee,data">
                <div>应收:{{data.totalFee}}</div>
                <div>实收:{{data.actualFee}}</div>
            </template>


          </a-table>
          <div class="flex justify-end mt-20 items-center pb-20">
        <a-pagination
          v-model="renewalForm.pageNum"
          show-size-changer
          :total="renewalTotal"
          show-quick-jumper
          :page-size.sync="renewalForm.rowsNum"
          :show-total="total => `共 ${total} 条记录`"
          @showSizeChange="renewalSizeChange"
          @change="renewalPageChange"
        >
        </a-pagination>
      </div>



        </a-tab-pane>





      </a-tabs>
      <AddressComp ref="map" />
    </a-spin>
    <template #footer>
      <a-button type="primary" @click="showModal = false">好的</a-button>
    </template>
	<!-- 扣款明细 -->
	<a-modal append-to-body v-model="deductionDetails" width="1000px"
		:dialog-style="{ top: '30px' }" :footer='null' :body-style="{
	    padding: '8px 20px',
	  }">
	  <section class="flex font-bold text-18" slot="title">
	  	<section class="flex items-center">
	  		<span >总扣款金额明细</span>
	  		<span class="mx-6 text-28">·</span>
	  		<span>{{ currData.id }}</span>
	  	</section>
	  </section>
	  <a-table  @change="onPageChange" class="mt-16 order-table" :columns="deductionColumns" :data-source="deductiondata" bordered :pagination="paginationNew" >
	  	
		<template #totalAmounts="totalAmounts, data">
		<div>
			<span>{{data.totalAmount}}</span>
			<span style="color: #1890ff;" @click="goOrderdeductions(data,'详情')" class="ml-7">明细</span>
		</div>
		</template>
	  <template #refundAmount="refundAmount, data">
	  <div>
	  	<span>{{data.refundAmount}}</span>
	  	<span style="color: #1890ff;" @click="getRefunDetail(data)" class="ml-7">明细</span>
	  </div>
	  </template>
	  </a-table>
	  </a-modal>
	  <!-- 退款金额明细 -->
	  <a-modal width="640px" v-model="refundDetails" title="退款金额明细" :footer="null">
	  	<div>
	  		<a-table :columns="refundColumnss" :data-source="refundData" :pagination="false">
	  			<!-- detailData:{}
	  			detailColumns -->
	  			<!-- 	<template #editAmount="val, data">
	  					<span>￥10</span>
	  					<span style="color: #1890ff;" @click="getDetail(data)" class="ml-7">明细</span>
	  				</template> -->
	  				</a-table>
	  	</div>
	  </a-modal>
	  <OrderDeductions ref="orderDeductions" :store-id="storeId" />
  </a-modal>
</template>
<script>
import moment from 'moment'
import OrderDeductions from './Orderdeductions'
	import { createOrderDeduction,getDeductList,getList,getDepositList,getOrderList,getCancelOrderDeduction,getCreateDeductionRefund,getDeductionDetail } from '@/api/order/orderdeductions'
import { isEmpty, get } from 'lodash'
import colorMap from './colorMap'
import {
  getOrderBookingInfo,
  getOrderFeeInfo,
  getOrderPickupInfo,
  getOrderReturnInfo,
  getOrderStrategyInfo,
  refundList,
  getOrderInfoByRenewalList,
  cancelOrderRenewal,
  deductionDetail,
	geteleteOffline
} from '@/api/order/order-manage'
const getDataFnMap = {
  bookingInfo: getOrderBookingInfo,
  feeInfo: getOrderFeeInfo,
  pickupInfo: getOrderPickupInfo,
  returnInfo: getOrderReturnInfo,
  strategyInfo: getOrderStrategyInfo,
}
import AddressComp from './AddressComp'
import { addLog } from '@/api/common'
export default {
  name: 'OrderDetails',
  components: { AddressComp,OrderDeductions, },
  data() {
    return {
      showModal: false,
	  isPreviewVisible:false,
	  refundColumnss:[
	  	{
	  			title: '退款金额（元）',
	  			dataIndex: 'amount',
	  			align: 'center',
	  			scopedSlots: {
	  				customRender: 'amount'
	  			},
	  			// customRender: (couponValue) => `${refundAmount}元`,
	  		},{
	  			title: '退款原因',
	  			dataIndex: 'reason',
	  			align: 'center',
	  		},
	  		// {
	  		// 	title: '状态',
	  		// 	dataIndex: 'finished',
	  		// 	align: 'center',
	  		// 	customRender: (text) => {
	  		// 	   return text === true ? '退款成功' :'退款中' ;
	  		// 	 }
	  		// },
	  		,{
	  			title: '创建人',
	  			dataIndex: 'createByName',
	  			align: 'center',
	  		},
	  		,{
	  			title: '创建时间',
	  			dataIndex: 'createTime',
	  			align: 'center',
	  		},
	  ],
	  	refundData:[],
		createEditLoading:false,
	  refundDetails:false,
	  offlineCharges:[],
	  isvisible:false,
	  confirmLoading: false,
	  ModalText:'',
      loading: false,
      tabKey: 'bookingInfo',
      orderRemark: '',
      colorMap,
      currData: {},
      bookingInfo: {},
      feeInfo: {},
      pickupInfo: {},
      returnInfo: {},
      strategyInfo: {},
      orderStatusEnums: [],
      credentialTypeEnums: [],
      noticeTypeEnums: [],
      cancelTypeEnums: [],
      feeCollectionTypeEnums: [],
      depositPayTypeEnums: [],
	  columns: [{
	  		title: '授权单号',
	  		// fixed: 'right',
	  		dataIndex: 'id',
	  
	  		scopedSlots: {
	  			customRender: 'id'
	  		},
	  		align: 'center'
	  	},
	  	{
	  		title: '支付方式',
	  		// fixed: 'right',
	  		dataIndex: 'payChannelDesc',
	  
	  		scopedSlots: {
	  			customRender: 'payChannelDesc'
	  		},
	  		align: 'center'
	  	},
	  	{
	  		title: '授权时间',
	  		// fixed: 'right',
	  		dataIndex: 'createTime',
	  
	  		scopedSlots: {
	  			customRender: 'createTime'
	  		},
	  		align: 'center'
	  	},
	  	{
	  		title: '预计解冻时间',
	  		// fixed: 'right',
	  		dataIndex: 'preEndTime',
	  
	  		scopedSlots: {
	  			customRender: 'preEndTime'
	  		},
	  		align: 'center'
	  	},
	  	{
	  		title: '总冻结金额(元)',
	  		// fixed: 'right',
	  		dataIndex: 'totalFreezeAmount',
	  
	  		scopedSlots: {
	  			customRender: 'totalFreezeAmount'
	  		},
	  		align: 'center'
	  	},
	  	{
	  		title: '可解冻金额(元)',
	  		// fixed: 'right',
	  		dataIndex: 'unFreezableAmount',
	  
	  		scopedSlots: {
	  			customRender: 'unFreezableAmount'
	  		},
	  		align: 'center'
	  	},
	  	{
	  		title: '已解冻金额(元)',
	  		// fixed: 'right',
	  		dataIndex: 'totalUnFreezeAmount',
	  
	  		scopedSlots: {
	  			customRender: 'totalUnFreezeAmount'
	  		},
	  		align: 'center'
	  	},
	  	{
	  	title: '总扣款金额(元)',
	  		// fixed: 'right',
	  		dataIndex: 'totalDeductAmount',
	  	
	  		scopedSlots: {
	  			customRender: 'totalDeductAmount'
	  		},
	  		align: 'center'
	  	},
	  
	  ],
	  preferential:[
	     { title: '优惠类型', dataIndex: 'promotionName' }, 
	     { title: '卡卷金额(元)',  dataIndex: 'couponValue',
	     customRender: (couponValue) => `￥${couponValue}`, },
	       { title: '出资方', dataIndex: 'investor',ellipsis: true,
	  		  scopedSlots: { customRender: 'investor' }, }, 
	  	  { title: '优惠描述', dataIndex: 'promotionDesc' },
	  ],
	  osfflineColumns:[
	  		  { title: '收款类型', dataIndex: 'name' },  
	  			    { title: '收款金额(元)',  dataIndex: 'amount',
	      customRender: (amount) => `￥${amount}`, },
	  				{
	  				  title: '收款凭证',
	  				  dataIndex: 'photos',
	  				  width: '20%',
	  				  ellipsis: true,
	  				  scopedSlots: { customRender: 'photos' },
	  				},
	  				  { title: '创建人', dataIndex: 'creatorName' },
	  				   { title: '创建时间', dataIndex: 'createTime' },
	  				   // {
	  				   //   title: '操作',
	  				   //   dataIndex: 'deletes',
	  				   //   width: '20%',
	  				   //   ellipsis: true,
	  				   //   scopedSlots: { customRender: 'deletes' },
	  				   // },
	  ],
      feeColumns: [
        { title: '费用名称', width: '20%', dataIndex: 'name', align: 'center' },
        {
          title: '单价(元)',
          width: '20%',
          dataIndex: 'unitPrice',
          align: 'center',
          scopedSlots: { customRender: 'unitPrice' },
        },
        {
          title: '收费方式',
          dataIndex: 'unit',
          width: '20%',
          align: 'center',
          customRender: (value) => {
            return value ? '按' + value : '--'
          },
        },
        {
          title: '租期',
          dataIndex: 'rentDays',
          width: '20%',
          align: 'center',
          customRender: (value, row, index) => {
            const tableData = this.feeInfo.feeDetailInfos || []
            const obj = {
              children: this.$utils.formatHours(this.feeInfo.realRentHours),
              attrs: {},
            }

            obj.attrs.rowSpan = index === 0 ? tableData.length : 0
            return obj
          },
        },
        {
          title: '收费金额(元)',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'amount' },
        },
      ],
      addedServiceColumns: [
        { title: '服务编号', dataIndex: 'serviceCode' },
        {
          title: '服务名称',
          dataIndex: 'serviceName',
          width: '20%',
          ellipsis: true,
          scopedSlots: { customRender: 'serviceName' },
        },
        { title: '数量', dataIndex: 'quantity', customRender: (value) => 'x' + value },
        { title: '单价(元)', dataIndex: 'price' },
        { title: '总价(元)', dataIndex: 'amount' },
        {
          title: '服务描述',
          align: 'center',
          width: '25%',
          ellipsis: true,
          dataIndex: 'serviceDesc',
          scopedSlots: { customRender: 'serviceDesc' },
        },
      ],
      cancelRulesColumns: [
        {
          title: '取消时间规则',
          width: '50%',
          align: 'center',
          dataIndex: 'Hours',
          scopedSlots: { customRender: 'Hours' },
        },
        { title: '取消费用', width: '50%', align: 'center', dataIndex: 'Fee', scopedSlots: { customRender: 'Fee' } },
      ],
      rentColumns: [
        {
          title: '类型',
          width: '50%',
          align: 'center',
          dataIndex: 'title',
          scopedSlots: { customRender: 'title' },
        },
        { title: '须知内容', width: '50%', dataIndex: 'description',scopedSlots: { customRender: 'description' } },
      ],
      moreTipsColumns: [
        { title: '须知概要', width: '50%', dataIndex: 'title', scopedSlots: { customRender: 'dataTitle' } },
        { title: '须知详情', width: '50%', dataIndex: 'rentCarTips', scopedSlots: { customRender: 'rentCarTips' } },
      ],



      ductionList: [],
      refundList: [],
      pageNum1: 1, // 页码
      rowsNum1: 10, // 每页的数据
      rowCount1: 0, // 总页码数据

      pageNum2: 1, // 页码
      rowsNum2: 10, // 每页的数据
      rowCount2: 0, // 总页码数据

      deductionTypeEnums: [], // 扣款类型
      refundTypeEnums: [], // 退款类型

      deductData: [],
      refundColumns: [
        // 退款信息列表
        {
          title: '费用类型',
          dataIndex: 'refundTypeDesc',
          scopedSlots: { customRender: 'refundTypeDesc' },
          align: 'center',
        },
        { title: '支付类型', dataIndex: 'payTypeDesc', scopedSlots: { customRender: 'payTypeDesc' }, align: 'center' },
        {
          title: '退款金额（元）',
          dataIndex: 'refundAmount',
          scopedSlots: { customRender: 'refundAmount' },
          align: 'center',
        },
        { title: '退款原因', dataIndex: 'reason', scopedSlots: { customRender: 'reason' }, align: 'center' },
        { title: '创建人', dataIndex: 'createByName', scopedSlots: { customRender: 'createByName' }, align: 'center' },
        { title: '创建时间', dataIndex: 'createTime', scopedSlots: { customRender: 'createTime' }, align: 'center' },
      ],
    
       //续租表格
       renewalInfoColumns:[
      {
          title: '续租单号',
          dataIndex: 'id',
          align: 'center',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '续租期限',
          dataIndex: 'rentDays',
          align: 'center',
          scopedSlots: { customRender: 'rentDays' },
        },
        {
          title: '续租费用（元）',
          dataIndex: 'fee',
          align: 'center',
          scopedSlots: { customRender: 'fee' },
        },
        {
          title: '订单状态',
          dataIndex: 'orderStatus',
          align: 'center',
          customRender: (value) => {
            return this.transformOrderStatus(value)
          },
          
        },
        {
          title: '是否线上',
          dataIndex: 'isOnline',
          align: 'center',
          customRender: (value) => {
            return value ? '是' : '否'
          },
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '续租取消费（元）',
          dataIndex: 'cancelFee',
          align: 'center',
          customRender: (value) => {
            return value ? value : '-'
          },
        },
        {
          title: '取消时间',
          dataIndex: 'cancelTime',
          align: 'center',
        },
       
      ],
      renewalForm:{
        //续租查询
        pageNum:1,
        rowsNum:10
      },
      renewalTotal:0,//续租列表总数
      renewalInfoData:[],//续租表格数据
          //费用信息续租费用表格
          reletFeeColumns:[
        {
          title: '费用名称',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '单价（元）',
          dataIndex: 'unitPrice',
          align: 'center',
          scopedSlots: { customRender: 'unitPrice' },
        },
        {
          title: '收费方式',
          dataIndex: 'unit',
          align: 'center',
          customRender: (value) => {
            return value ? '按' + value : '--'
          },
        },
        {
          title: '租期',
          dataIndex: 'rentDays',
          align: 'center',
          scopedSlots: { customRender:'rentDays' },
          // customRender: (value, row, index) => {
          //   const tableData = this.feeInfo.feeDetailInfos || []
          //   const obj = {
          //     children: this.$utils.formatHours(this.feeInfo.realRentHours),
          //     attrs: {},
          //   }

          //   obj.attrs.rowSpan = index === 0 ? tableData.length : 0
          //   return obj
          // },
        },
        {
          title: '收费金额（元）',
          dataIndex: 'amount',
          align: 'center',
          scopedSlots: { customRender: 'amount' },
        },

      ],
      refunddata: [],
      weizhangarr: [],
      chesunarr: [],
      zuchearr: [],
	  feeInfoArr:[],
	  	deductionDetails:false,///扣款明细
		amountData:{},
		paginationNew: {
		      current: 1,
		      pageSize: 10,
		      total: 0,
		      showSizeChanger: true,
		      showQuickJumper: true,
		      pageSizeOptions: ['10', '20', '30', '40'],
		   
		    },
			deductiondata:[
				{id:'2222'}
			],
			deductionColumns:[
				{
						title: '商家订单号',
						// fixed: 'right',
						dataIndex: 'id',
				
						scopedSlots: {
							customRender: 'id'
						},
						align: 'center'
					},
					{
							title: '扣款金额(元)',
							// fixed: 'right',
							dataIndex: 'totalAmount',
					
							scopedSlots: {
								customRender: 'totalAmounts'
							},
							align: 'center'
						},
						
							{
									  title: '状态',
									  dataIndex: 'succeed',
									  customRender: (text) => {
									    return text ? '扣款成功' : '扣款中';
									  },
									  align: 'center'
								},
								{
										title: '总退款金额(元)',
										// fixed: 'right',
										dataIndex: 'refundAmount',
								
										scopedSlots: {
											customRender: 'refundAmount'
										},
										align: 'center'
									},
									{
											title: '创建人',
											// fixed: 'right',
											dataIndex: 'createByName',
									
											scopedSlots: {
												customRender: 'createByName'
											},
											align: 'center'
										},
										{
												title: '创建时间',
												// fixed: 'right',
												dataIndex: 'createTime',
										
												scopedSlots: {
													customRender: 'createTime'
												},
												align: 'center'
											},
										
			],
    }
  },
  computed: {
    credentialTypeNames() {
      const credentialType = this.strategyInfo.pickCarmaterialsInfo.credentialType
      if (!credentialType) return
      return credentialType
        .split(',')
        .filter((e) => {
          return this.credentialTypeEnums.find((item) => +e === item.value)
        })
        .map((e) => this.credentialTypeEnums.find((item) => +e === item.value).name)
        .join(',')
    },
    depositPayTypeNames() {
      if (!this.strategyInfo.pickCarmaterialsInfo) return
      const depositPayType = this.strategyInfo.pickCarmaterialsInfo.depositPayType
      if (!depositPayType) return
      return depositPayType
        .split(',')
        .filter((e) => {
          return this.depositPayTypeEnums.find((item) => +e === item.value)
        })
        .map((e) => this.depositPayTypeEnums.find((item) => +e === item.value).name)
        .join(',')
    },
    cancelData() {
      if (!this.strategyInfo.cancelStrategInfo) return []
      const data = JSON.parse(this.strategyInfo.cancelStrategInfo.cancelRules)
      console.log(data)
      // data.sort((a, b) => b.Hours - a.Hours)
      data.sort((a, b) => b.Hours - a.Hours)
      return data
      // return JSON.parse(this.strategyInfo.cancelStrategInfo.cancelRules)
    },
  },
  watch: {
    showModal() {
      this.tabKey = 'bookingInfo'
      this.bookingInfo = {}
      this.feeInfo = {}
      this.pickupInfo = {}
      this.returnInfo = {}
      this.ductionList = []
      this.refundList = []
      this.strategyInfo = {}
    },
  },
  async created() {
    this.credentialTypeEnums = await this.$utils.getDictList('CredentialType')
    this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
    this.orderStatusEnums = await this.$utils.getDictList('OrderStatus')
    this.noticeTypeEnums = await this.$utils.getDictList('NoticeType')
    this.cancelTypeEnums = await this.$utils.getDictList('CancelType')
    this.feeCollectionTypeEnums = await this.$utils.getDictList('FeeCollectionType')
    this.depositPayTypeEnums = await this.$utils.getDictList('DepositPayType')

    this.deductionTypeEnums = await this.$utils.getDictList('DeductionTypeEnum') // 扣款类型
    this.refundTypeEnums = await this.$utils.getDictList('RefundTypeEnum') // 扣款类型
  },
  methods: {
    moment,
    open(data) {
      this.showModal = true
      this.currData = data
      this.getOrderData(this.tabKey)
    },
	getRefunDetail(data){
		this.refundDetails=true
		this.getDetails(data)
	},
	goOrderdeductions(data,name) {
		this.$refs.orderDeductions.open(data,name)
	},
	getDetails(data) {
		this.createEditLoading = true
		
	
			
			
			getDeductionDetail({
				orderId: data.id
			})
			.then((data) => {
				if (data) {
					
	          
	        this.refundData=data.refunds
	
					this.createEditLoading = false
				} else {
					this.createEditLoading = false
				}
			})
			.finally(() => (this.loading = false))
	},
	getdeductionDetails(data){
	     this.amountData=data
		this.deductionDetails=true
		this.totalDeductionAmount()
	},
	onPageChange(page, pageSize) {
	    // 自定义的处理逻辑
	    console.log(`当前页码：${page}`);
	    console.log(`每页条数：${pageSize}`);
	    
	    // 更新当前页数和每页条数
	    this.paginationNew.current = page.current;
	    this.paginationNew.pageSize = page.pageSize;
	    
	    // 获取数据
	    this.totalDeductionAmount();
	  },
	totalDeductionAmount(){
		getOrderList({
			 pageNum:  this.paginationNew.current,
			  rowsNum: this.paginationNew.pageSize,
			  depositId:this.amountData.id
		}).then(data => {
		    this.paginationNew.total = data.rowCount
		    this.deductiondata = data.items
			
		}).finally(() => this.loading = false)
	},
	handleOk(e) {
		
			this.confirmLoading = true;
			setTimeout(() => {
				this.isvisible = false;
				this.confirmLoading = false;
				this.deleteOffline(this.offlineId)
				
			}, 2000);
		},
	async deleteOffline(id){//删除线下车损
			let res = await geteleteOffline({id:id})
			if (res) {
				this.offlineCharges=this.offlineCharges.filter(item => item.id !== id)
				this.$message.success('删除成功')
				}
		},
		deletex(obj){
			this.isvisible = true
			this.offlineId=obj.id
			console.log(this.isvisible,obj)
			this.ModalText = `请确定是否删除${obj.amount}元的线下车损?`;
							
		},
	handleCancel(e) {//关闭线下删除车损弹框
					console.log('Clicked cancel button');
					this.isvisible = false;
				},
    transformOrderStatus(key){
        let map={
          '1':"待确认",
          "2":"待取车",
          "3":"待还车",
          "4":"已还车",
          "6":"待支付",
          "7":"已确认待排车",
          "-1":"已取消",
          "0":"未知",
        }
        return map[key]
    },
    transformNumber(index){
      let key=String(index+1)
        let map={
          '1':"一",
          "2":"二",
          "3":"三",
          "4":"四",
          "5":"五",
          "6":"六",
          "7":"七",
          "8":"八",
          "9":"九",
          "10":"十",
        }
        if (key>10) {
          let str=""
          for (let index = 0; index < key.length; index++) {
            str+=map[key]
          }
          return str
        }
        return map[key]
    },
    //日期转换
    getWeek (date) { // 参数时间戳
      let week = moment(date).day()
      switch (week) {
        case 1:
          return '周一'
        case 2:
          return '周二'
        case 3:
          return '周三'
        case 4:
          return '周四'
        case 5:
          return '周五'
        case 6:
          return '周六'
        case 0:
          return '周日'
      }
    },
     //获取续租表格
   getRenewalTable(){
    getOrderInfoByRenewalList({ orderId: this.currData.id,...this.renewalForm}).then(res=>{
       this.renewalTotal= res.rowCount
       this.renewalInfoData=res.items
      })
   },
       // 续租每页数量变化的时候
       renewalSizeChange(pageNum, rowsNum) {
      this.renewalForm.pageNum = pageNum
      this.renewalForm.rowsNum = rowsNum
      this.getRenewalTable()
    },
    // 续租每页数量变化的时候
    renewalPageChange(pageNum, rowsNum) {
      this.renewalForm.pageNum = pageNum
      this.renewalForm.rowsNum = rowsNum
      this.getRenewalTable()
    },

    // 退款列表
    getrefundList() {
      refundList({ orderId: this.currData.id, type: this.refundType }).then((data) => {
        console.log(data)
        this.refunddata = data
        // this.total = data.rowCount
      })
    },
    // 扣款详情
    getdeductInfo() {
      getDepositList({ orderId: this.currData.id,pageNum:1,rowsNum:50 }).then((data) => {
        console.log(data)
        this.deductData = data.items
        // let arr = []
        // this.deductData.map((v) => {
        //   this.accountId = v.orderAccount.id
        //   arr = v.orderRefunds
        // })
        // console.log(arr)
        // arr.map((k) => {
        //   if (k.accountRefundType == 1) {
        //     this.weizhangarr.push(k)
        //   } else if (k.accountRefundType == 2) {
        //     this.chesunarr.push(k)
        //   } else if (k.accountRefundType == 3) {
        //     this.zuchearr.push(k)
        //   }
        // })
    
      })
    },

    getOrderData(tabKey) {
      if (!isEmpty(this[tabKey])) return

      if (tabKey == 'refundInfo') {
        // 订单退款信息
        console.log(123)
        this.refundType = 2
        this.getrefundList()
        return
      }
      if (tabKey == 'deductInfo') {
        // 订单扣款信息
        this.refundType = 1
        console.log(123)
        // this.getrefundList()
        this.getdeductInfo()
        return
      }
           // 续租信息
           if (tabKey == 'renewalInfo') {
        this.getRenewalTable()
        return
      }

      this.loading = true
      getDataFnMap[tabKey]({ orderId: this.currData.id })
        .then((data) => {
          console.log(data,'xxxx',tabKey)
          let arr=[]
          let arrfee=[]
          if(tabKey=='feeInfo'){
          			  
          			  data.feeDetailInfos.forEach(res=>{
          				  if(res.payScenario==2){
          					 arr.push(res) 
          				  }else{
          					  arrfee.push(res)
          				  }
          			  })
          			  this.offlineCharges=arr
          }
          this[tabKey] = data
          if(tabKey=='feeInfo'){
          			   this.feeInfoArr=arrfee
          }

        })
        .finally(() => (this.loading = false))
    },
    setMapPoint(data, label = 'pickup') {
      this.$refs.map.setMapPoint({
        longitude: data[label + 'Longitude'],
        latitude: data[label + 'Latitude'],
        content: data[label + 'Address'],
      })
    },
    confirmRemark() {
      const detail = this.orderRemark.trim()
      if (!detail || this.loading) return
      this.loading = true
      addLog({ orderId: this.currData.id, eventType: 4, detail: '' + detail })
        .then(() => {
            this.orderRemark = ''
            this.$message.success('备注成功')
        })
        .finally(() => (this.loading = false))
    },
  },
}
</script>

<style lang="less">
.unitPricePopconfirm{
	.ant-popover-inner-content{
			max-height: 700px!important;
			overflow: scroll!important;
		}
    .ant-popover-message{
      padding: 0 !important;
      .ant-popover-message-title{
        padding: 0;
      }
        .anticon-exclamation-circle{
          display:none !important;
        }
    }
    .ant-popover-buttons{
          display:none !important;
        }
        .pirceBox{
          max-width: 266px;
          .pirceBox-item{
          text-align: center;
          border: 1px solid #1890ff;
          padding:3px 15px ;
          border-radius: 6px;
            p{
              margin: 0;
              text-align: center;
            }
        }
        }
      
}

 </style>
<style lang="less" scoped>
.btnRigth{
  position: absolute;
    top: -6px;
}
.flex {
  display: flex;
  align-items: center;
}
.info {
  padding-top: 14px;
  color: #333;
  min-height: calc(100vh - 360px);
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 12px;
  /deep/ .ant-table {
    color: #333;
    .ant-table-footer {
      padding: 0;
      background: transparent;
      .footer-item {
        padding: 8px 0;
        &:not(:last-of-type) {
          border-bottom: 1px solid #e8e8e8;
        }
        section {
          width: 20%;
          text-align: center;
        }
      }
    }
  }
}
.basic-info {
  .flex;
  padding: 0 52px;
  .user-info {
    .username {
      margin-bottom: 12px;
      line-height: 1;
      font-size: 28px;
    }
    .is-new {
      font-size: 14px;
      color: #078e00;
    }
    .phone {
      .flex;
      font-size: 12px;
      color: #666;
      img {
        margin-right: 3px;
        width: 15px;
        height: 15px;
      }
    }
  }
  .car-info {
    flex: 1;
    margin-left: 35px;
  }
}
.pickup-info {
  .form-item {
    .label {
      width: auto;
      text-align: left;
    }
  }
}
.return-info {
  padding-left: 20px;
  .form-item {
    .label {
      text-align: left;
      width: auto;
    }
  }
}
.strategy-info {
  .form-item {
    .label {
      /*width: 122px;*/
      width: auto;
    }
  }
}
.form-item {
  .flex;
  margin-bottom: 20px;
  align-items: flex-start;
  &.block {
    display: block;
  }
  .label {
    text-align: left;
    width: auto !important;
    font-size: 14px;
    color: #333;
    &.w-auto {
      text-align: left;
      width: auto;
    }
  }
  .value {
    flex: 1;
  }
}
.tag {
  display: inline-block;
  padding: 4px;
  line-height: 1;
  border-radius: 3px;
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;
  &.orange-bg {
    background-color: #ff6600;
  }
  &.grey-bg {
    background-color: #929292;
  }
}
/deep/.ant-form-item-children {
  display: flex;
}
</style>
